<template lang="pug">
.statistic-wrapper
  .statistic-toolbar
    ul
      li 分区：
        select(
          v-model="areaFlag"
          type='selet')
          option(
            :value="false") 全部分区
          option(
            v-for="(item,index) in areaList"
            :value="item.id") {{item.area}}
      li
        span 时间：
        el-date-picker(
          v-model="timeRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:00:00")
      //- li.time-length
      //-   span 间隔：
      //-   select(v-model="interval")
      //-     option(
      //-       v-for="(item,index) in intervalList"
      //-       :key="'interval'+index"
      //-       :value="item.value") {{item.label}}
  .statistic-attribute
    ul
      li
        span.list-key 分区总供水量
        span.list-value {{kpa.dws | nullValue(' m³')}}
      li
        span.list-key 大用户用水量
        span.list-value {{kpa.lucw | nullValue(' m³')}}
      li
        span.list-key 产销差水量
        span.list-value {{kpa.nrw | nullValue(' m³')}}
      li
        span.list-key 产销差比率
        span.list-value {{kpa.nrwRate | nullValue(' %')}}
  .statistic-content
    .content-top
      .content-top-left
        span.iconfont.icon-turn(@click="showTable=!showTable"
         :title="showTable?'图':'表'")
        transition
          .content-statistic-wrap(v-if="!showTable")
            .content-statistic
              ul.statistic-navbar
                li(
                  v-for="(item,index) in tabList"
                  :class="{'active-li':item.name==activeTab}"
                  @click="changeActiveTab(item.name)") {{item.label}}
              component(
                ref='charts'
                :is="activeTab"
                :callbackData="callbackData"
                @selectAreaPie="selectAreaPie")
            .y-line
            .content-nrw
              ChartNRW(
                ref='chartNRW'
                :timeRange="formatTimeRange"
                :selectedData="selectedData"
                @selectAreaPie="selectAreaPie")
        transition(name="fade")
          .content-kpi(v-if="showTable")
            span.btn-export.iconfont.icon-export(
              title='导出'
              @click="$refs.tableKPI.fileEvent('/pn/dpa/stat/kpiNrw/export')")
            TableKPI(
              ref='tableKPI'
              :callbackData="callbackData"
              @selectAreaPie="selectAreaPie")
      .content-areaDevice
        ChartAreaDevice(
          ref='chartAreaDevice'
          :timeRange="formatTimeRange"
          :selectedData="selectedData"
          @selectAreaPie="selectAreaPie")
    .content-bottom
      TableNavbar(
        ref='tableNavbar'
        :areaId="areaId"
        :timeRange="formatTimeRange")
</template>

<script>
/**
 * @name ZonalStatistic 分区统计页面
 * @author 王锐锋 <wangrf@gddxit.com>
 * @description 用于展示分区的数据统计
 *参数：
 */

// 引入组件
import ChartAgvPressure from './ChartAgvPressure'
import ChartLargemeterQuantity from './ChartLargemeterQuantity'
import ChartSupply from './ChartSupply'
import ChartNRW from './ChartNRW'
import ChartAreaDevice from './ChartAreaDevice'
import TableNavbar from './TableNavbar'
import TableKPI from './TableKPI'
export default {
  data () {
    return {
      timeRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
      formatTimeRange: [new Date(new Date().getTime() - 24 * 60 * 60 * 1000), new Date()],
      areaId: false,
      areaFlag: false,
      areaList: [],
      deviceNames: [],
      tabList: [
        {
          name: 'ChartSupply',
          label: '分区供水量'
        },
        {
          name: 'ChartLargemeterQuantity',
          label: '大用户用水量'
        },
        {
          name: 'ChartAgvPressure',
          label: '平均压力'
        }
      ],
      activeTab: '',
      kpa: {
        dws: null,
        lucw: null,
        nrw: null,
        nrwRate: null
      },
      kpaList: [],
      showTable: false,
      callbackData: {}, // 子组件参数
      interval: '',
      intervalList: [],
      selectedData: {}
    }
  },
  components: {
    ChartLargemeterQuantity,
    ChartAgvPressure,
    ChartSupply,
    ChartNRW,
    ChartAreaDevice,
    TableNavbar,
    TableKPI
  },
  watch: {
    areaFlag (val) {
      console.log(val)
      if (val || val !== 0) {
        this.$router.push({
          name: 'partitionInfo',
          path: '/partitionInfo',
          params: { areaId: val },
          props: {areaId: val}
        })
      }
    },
    areaId (val) {
      this.getCallbackData()
      this.refreshComponents()
      if (!val) {
        return
      }
      this.kpa = this.kpaList.filter((item) => {
        return item.id === val
      })[0] || this.kpa
    },
    timeRange () {
      this.getCallbackData()
      this.refreshComponents()
    }
  },
  methods: {
    changeActiveTab (tab) {
      this.activeTab = tab
    },
    // 设备数量
    getDeviceNum () {
      this.$get({
        url: `/pn/dpa/monitor/siteNum`,
        params: {
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime()
        }
      }).then((res) => {
        this.deviceNames = res.deviceName
        this.activeTab = this.tabList[0].name
      })
    },
    getAreaRelation () {
      this.$get({
        url: '/dxbase/relation?relationList=pressureAreas'
      }).then(res => {
        // this.areaId = res.pressureAreas[0].value
        this.areaList = res.pressureAreas.map(item => {
          return {
            area: item.label,
            id: item.value
          }
        })
      })
    },
    getDateTypeRelation () {
      this.$get({
        url: '/dxbase/relation?relationList=dateType'
      }).then(res => {
        this.intervalList = res.dateType
        this.interval = res.dateType[0].value
      })
    },
    getKPA () {
      this.$get({
        url: `/pn/dpa/stat/kpa`,
        params: {
          // 'areaId': this.areaId,
          'startTime': this.timeRange[0].getTime(),
          'endTime': this.timeRange[1].getTime()
        }
      }).then((res) => {
        if (!res.data) return
        this.kpa = res.data
      })
    },
    // 刷新动态组件参数
    getCallbackData () {
      this.callbackData = {
        areaId: this.areaId,
        timeRange: this.formatTimeRange,
        selectedData: this.selectedData
      }
    },
    changeTimeFormat (datetime) {
      var time = new Date(datetime)
      time.setSeconds(0)
      time.setMinutes(0)
      return time
    },
    // 格式化时间最小单位为小时
    getFormatTimeRange () {
      this.formatTimeRange = this.timeRange.map(item => this.changeTimeFormat(item))
      if (this.formatTimeRange[1].getTime() - this.formatTimeRange[0].getTime() < 60 * 60 * 1000) {
        this.formatTimeRange[1] = new Date(this.formatTimeRange[1].getTime() + 60 * 60 * 1000 - 1)
      }
    },
    // 请求页面所有数据
    refreshComponents () {
      this.getFormatTimeRange()
      this.$nextTick(() => {
        if (!this.showTable) {
          this.$refs.charts.getData()
          this.$refs.chartNRW.getData()
        } else {
          this.$refs.tableKPI.getData()
        }
        if (this.$refs.chartAreaDevice) this.$refs.chartAreaDevice.getData()
        // this.$refs.tableNavbar.refreshTable()
      })
    },
    // 切换选中地区
    selectAreaPie (params) {
      // if (this.areaId === false) {
      this.areaId = this.areaList[params.dataIndex].id
      // }
      this.selectedData = params
    }

  },
  filters: {
    nullValue (val, unit) {
      return (val === null || val === undefined) ? '-' : (parseFloat(val).toFixed(3) + unit)
    }
  },
  mounted () {
    this.getAreaRelation()
    this.getDeviceNum()
    this.getCallbackData()
    this.getFormatTimeRange()
    this.getDateTypeRelation()
    this.getKPA()
    this.getCallbackData()
    // this.$get({
    //   url: '/pn/dpa/stat/pt'
    // }).then((res) => {
    //   console.log(res)
    // })
  }
}
</script>

<style lang="sass" scoped>
/deep/.el-range-editor
  .el-range-input
    max-width: 160px
.statistic-wrapper
  width: 100%
  height: 100%
  background-color: #ecf0f1
  display: flex
  flex-direction: column
  padding: 10px
  .statistic-toolbar
    width: 100%
    height: 50px
    background-color: #fff
    padding: 5px
    margin-bottom: 10px
    ul
      display: flex
      li
        margin-left: 20px
        select
          width: 120px
          height: 40px
          border: 1px solid #dfdfdf
          border-radius: 5px
          font-size: 15px
          padding-left: 10px
          color: #606266
  .statistic-attribute
    width: 100%
    margin-bottom: 10px
    ul
      height: 50px
      display: flex
      background-color: #fff
      padding: 14px 40px
      li
        margin-left: 10px
        margin-right: 80px
        .list-key
          font-size: 14px
          font-weight: bold
          color: #333
          margin-right: 16px
        .list-value
          font-size: 14px
          color: gray
  .statistic-content
    width: 100%
    height: 90%
    background-color: #ecf0f1
    flex: 1
    display: flex
    flex-direction: column
    .content-top
      width: 100%
      flex: 10
      display: flex
      margin-bottom: 10px
      .content-top-left
        width: 75%
        margin-right: 0.7%
        position: relative
        background-color: #fff
        .icon-turn
          font-size: 24px
          color: #b5b5b5
          position: absolute
          top: 5px
          right: 10px
          z-index: 1
          cursor: pointer
        .content-statistic-wrap
          width: 100%
          height: 100%
          overflow: hidden
          .content-statistic
            width: 33%
            height: 100%
            float: left
            display: flex
            flex-direction: column
            min-width: 268px
            .statistic-navbar
              width: 100%
              height: 40px
              background-color: #fff
              display: block
              padding: 10px 0 0 10px
              display: flex
              li
                height: 30px
                text-align: center
                line-height: 30px
                font-size: 14px
                cursor: pointer
                border: 1px solid #dfdfdf
                display: inline-block
                flex: 1
              .active-li
                background-color: #29a1f7
                color: #fff
          .y-line
            width: 1px
            height: 84%
            background: #dfdfdf
            position: absolute
            top: 8%
            left: 34%
            display: inline-block
            z-index: 1
          .content-nrw
            width: 66%
            height: 100%
            float: left
        .content-kpi
          width: 100%
          height: 100%
          position: relative
          .btn-export
            color: #a0a0a0
            font-size: 20px
            position: absolute
            right: 10px
            top: 38px
            cursor: pointer
      .content-areaDevice
        width: 25%
        display: flex
        min-width: 268px
    .content-bottom
      width: 100%
      flex: 12
      display: flex
</style>
